// 基本信息
import DialogBox from "@/components/DialogBox";
import JsonEditerVue from "@/components/JsonForm/JsonEditer.vue";
import { ElForm } from "element-plus";
import { defineComponent, PropType } from "vue";
// import { PublicStore } from "@/stores/modules/public";
// import { SYSTEM_ID } from "@/config/config";
// import { devTaskAdd, devTaskEdit } from "@/api/modules/system/devTask";
// import { showTips } from "@/utils/util";
interface DeviceForm {
	[key: string]: any;
}

export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<DeviceForm | any>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: "请输入", trigger: "change" }],
			jsonData: [
				{ required: true, message: "请输入 JSON 数据", trigger: "blur" },
				{
					validator: (rule, value, callback) => {
						try {
							JSON.parse(value);
						} catch (err) {
							callback(new Error("JSON 数据格式错误"));
						}
						callback();
					},
					trigger: "blur"
				}
			]
		});
		// const state = ref({ taskId: "" });
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					props.detail.configData = JSON.parse(props.detail.jsonData);
					// let api = props.detail.id ? devTaskEdit : devTaskAdd;
					// let res = await api({ ...props.detail, taskType: "setup" });
					// let ok = showTips(res.code, "批量下发", res.message);
					// if (ok) {
					// 	state.value.taskId = props.detail.id || res.result.id;
					// 	uploadRef.value!.submit();
					// 	emit("submit");
					// }
					emit("submit");
				}
			});
		};
		onMounted(async () => {});
		// const publicStore = PublicStore();
		// const uploadRef = ref();
		watch(
			() => props.detail,
			() => {
				props.detail.jsonData = props.detail.configData ? JSON.stringify(props.detail.configData) : JSON.stringify({});
			}
		);
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
						<el-form-item label="任务名称" prop="name">
							<el-input v-model={props.detail.name} placeholder="请输入" />
						</el-form-item>
						<el-form-item label="任务指令" prop="jsonData">
							{/* <el-input v-model={props.detail.configData} placeholder="请输入" type="textarea" /> */}
							<JsonEditerVue v-model:data={props.detail.jsonData} style="height:300px;width:100%" />
						</el-form-item>
						{/* <el-form-item label="上传设置" prop="file">
							<div class="flex w-full">
								<el-upload
									ref={uploadRef}
									auto-upload={false}
									headers={{
										Authentication: publicStore.token,
										systemid: SYSTEM_ID,
										timestamp: Date.now()
									}}
									data={state.value}
									action="/api/device/task/import"
								>
									<el-button>请选择文件</el-button>
								</el-upload>
							</div>
						</el-form-item> */}
						{!props.detail.id ? (
							<el-form-item label="跳转到任务">
								<el-switch v-model={props.detail.switchVal} />
							</el-form-item>
						) : null}
					</el-form>
				</DialogBox>
			);
		};
	}
});
